<template>
    <div ref="wrapper">
        <slot></slot>
    </div>
</template>

<script type="text/ecmascript-6">
    import BScroll from 'better-scroll'
    import { REFRESH_TIME } from 'common/js/config'

    export default {
        name: 'scroll',
        props: {
            probeType: {
                type: Number,
                default: 1
            },
            click: {
                type: Boolean,
                default: true
            },
            // 用于监视dom的变化，供组件判断是否调用refresh
            data: {
                type: Array,
                default: null
            },
            listenScroll: {
                type: Boolean,
                default: false
            },
            listenScrollStart: {
                type: Boolean,
                default: false
            },
            pullup: {
                type: Boolean,
                default: false
            },
            beforeScroll: {
                type: Boolean,
                default: false
            }
        },
        mounted() {
            setTimeout(() => {
                this._initScroll()
                this._initEvents()
            }, REFRESH_TIME)
        },
        methods: {
            // 初始化
            _initScroll() {
                if (!this.$refs.wrapper) {
                    return
                }
                this.scroll = new BScroll(this.$refs.wrapper, {
                    probeType: this.probeType,
                    click: this.click
                })
            },
            // 加载事件
            _initEvents() {
                if (this.listenScroll) {
                    this.scroll.on('scroll', (pos) => {
                        this.$emit('scroll', pos)
                    })
                }

                if (this.pullup) {
                    this.scroll.on('scroll', () => {
                        // scrollY是负值
                        if (this.scroll.y <= (this.scroll.maxScrollY - 60)) {
                            this.$emit('scrollToEnd')
                        }
                    })
                }

                if (this.beforeScroll) {
                    this.scroll.on('beforeScrollStart', () => {
                        this.$emit('beforeScroll')
                    })
                }
            },
            // 方法代理
            enable() {
                this.scroll && this.scroll.enable()
            },
            disable() {
                this.scroll && this.scroll.disable()
            },
            refresh() {
                this.scroll && this.scroll.refresh()
            },
            scrollTo(...args) {
                this.scroll && this.scroll.scrollTo(...args)
            },
            scrollToElement(...args) {
                this.scroll && this.scroll.scrollToElement(...args)
            }
        },
        watch: {
            data() {
                setTimeout(() => {
                    this.refresh()
                }, REFRESH_TIME)
            }
        }
    }

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

</style>
